<script setup>
import {
  Delete,
  Search,
  Baseball,EditPen,Plus,Refresh,
  List

} from '@element-plus/icons-vue'

import { compile, onMounted, reactive, ref, watch,computed  } from "vue";
import axios from "axios";
import { ElMessageBox } from 'element-plus';


const list = ref([])
const total = ref(0);
const user = ref({});
const title = ref("");
const pageNo = ref(1);
const name = ref("");
const isDialog =ref(false);
const isConfirm = ref(false);
const ids = []

const selectedIds =ref([])
const isAllSelected =ref(false)

const render =async ()=>{
  const res =await axios.get(
    `http://localhost:8080/roles?page=${pageNo.value}&size=3&roleName=${name.value}`
      
  );
  list.value = res.data.records;
  // console.log(res.data);
  total.value = res.data.pages;
 
};


const handleSelectionChange = (val)=>{
  console.log(val);
  selectedIds.value = val.map(item => item.id); // 获取选中项的 id
  isAllSelected.value = selectedIds.length === list.value.length; // 更新全选复选框状态
  ids.push(selectedIds.value.map(item=> item))
}


const handleAllSelectionChange = (val)=>{
  if (val) {
        selectedIds.value = list.value.map(item => item.id); // 将所有项加入选中项
        ids.push(selectedIds.value.map(item=> item))
        console.log(ids);
        console.log(ids.join(','));
      } else {
        selectedIds.value = []; // 清空选中项
        ids.push(selectedIds.value.map(item=> item))

      }
}

const handleBatchDelete = async ()=> {
      // 执行批量删除操作，selectedIds 中存放了选中项的 id
      console.log('要删除的id：', ids.join(','));
      console.log(ids);
      // 调用删除接口等
      await axios({
        url:"http://localhost:8080/roles",
        method:"DELETE",
        params:{
          ids:ids.join(',')
        }
      })
      isConfirm.value = false;
      render()
    }

    
//搜索
const search = async ()=>{
  render();
}

const search1= async ()=>{
 name.value=''
  
}

// 翻页
const handleCurrentChange = (number) => {
  console.log(number);
  pageNo.value = number;
  render();
};

// 删除
let delId = 0;
const del = async (id) => {
  isConfirm.value = true;
  delId = id;
  ids.push(id)
};

//批量删除
const mutipleTable = ref()
const alldel = async (ids) =>{
  isConfirm.value = true;
  delId = ids;
}




//增加,修改
const addOrUpd = async (id) => {
  isDialog.value = true;
};


//提交
const sub = async () => {
console.log(user.value);
  if(user.value.id){
    await axios({
      url:"http://localhost:8080/roles",
      method:"PUT",
      data:{
        roleDTO:user.value
      }
    })
    isDialog.value = false;
    render()
  }else{
    await axios.post("http://localhost:8080/roles", user.value);
      isDialog.value = false;
      render();
  
  }

};

watch(isDialog, (newValue) => {
  if (newValue == false) {
    user.value = {};
  }
});

onMounted(() => {
  render();
});



</script>
<template>

<div class="big">
  <div class="shang">
    <div class="shang1">
      角色名称 <el-input v-model="name" style="width: 1100px" placeholder="角色名称 " /><br>
    </div>
    
    <div class="shang2">
       <el-button  :icon="Search"  type="primary"   @click="search">搜索</el-button>
       <el-button  @click="search1" ><el-icon><Refresh /></el-icon>重置</el-button>
    </div>
   
  </div>
  <div class="zhong">
    <el-button type="success" @click="addOrUpd(0)" ><el-icon><Plus /></el-icon>添加</el-button>
    <el-button  @click="alldel">批量删除</el-button>

  </div>
  <div class="xia">
      
    <el-table :data="list" border  style="width: 100%" ref="mutipleTable"  empty-text="暂无数据" @selection-change="handleSelectionChange" >
      <el-checkbox  label="" size="large" @change="handleAllSelectionChange" v-model="isAllSelected"/>
    <el-table-column prop="scoped" type="selection"  label="" >
      
    </el-table-column>
    
    <el-table-column prop="id" label="序号" width="180" />
    <el-table-column prop="roleName" label="角色名称" width="180" />
    <el-table-column prop="roleCode" label="角色编码" />
    <el-table-column prop="createTime" label="创建时间" />
    <el-table-column label="操作" v-slot="scoped">
      <el-button type="primary" @click="addOrUpd(scoped.row.id)"><el-icon><EditPen /></el-icon></el-button>
      <el-button type="danger" @click="del(scoped.row.id)" :icon="Delete" ></el-button>
      <el-button type="warning"><el-icon><Baseball /></el-icon></el-button>
    </el-table-column>
  </el-table>
  </div>
 <el-pagination
    background
    layout="prev, pager, next"
    :page-count="total"
    :page-size="2"
    ref="tableref"
    :data="tableList"
    @current-change="handleCurrentChange"
  />

  <el-dialog v-model="isConfirm" title="温馨提示" width="500">
    <span>确定要删除吗?</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isConfirm = false">取消</el-button>
        <el-button type="primary"  @click="handleBatchDelete"> 确定 </el-button>
      </div>
    </template>
  </el-dialog>



  <el-dialog v-model="isDialog" :title="title" width="500">
    <el-form-item label="角色名称" :label-width="100">
      <el-input v-model="user.roleName" autocomplete="off" />
    </el-form-item>
    <el-form-item label="角色编码" :label-width="100">
      <el-input v-model="user.roleCode" autocomplete="off" />
    </el-form-item>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="isDialog = false">取消</el-button>
        <el-button type="primary" @click="sub"> 提交 </el-button>
      </div>
    </template>
  </el-dialog>

</div>




</template>
<style scoped>
.biga{
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
}
.shang{
  border: 1px solid rgb(206, 206, 206);
  margin-bottom: 10px;
}
.zhong{
  padding: 10px;
  border: 1px solid rgb(206, 206, 206);
  margin-top: 20px;
  margin-bottom: 10px;
}
.xia{
  border: 1px solid rgb(206, 206, 206);
  margin-top: 20px;
  margin-bottom: 10px;
}
.shang1{
  margin-top: 10px;
  margin-left: 10px;
}
.shang2{
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}

</style>